<%--
  Created by IntelliJ IDEA.
  User: asus
  Date: 2018/1/31
  Time: 11:16
  To change this template use File | Settings | File Templates.
--%>
<%@page pageEncoding="UTF-8" %>
<!doctype html>
<html lang="zh-cmn">
<head>
    <%@include file="/WEB-INF/jsp/comm/head.jsp"%>
</head>
<body>

<div class="container">

    <div class="panel panel-default">
        <div class="panel-body">
            <form class="form-inline">
                <span>
                    请输入用户名称：<input type="text" name="userName" class="form-control" value="${userName}">
                </span>
                <span style="margin-left: 10px;">
                    使用状态：<select name="userStatus" class="form-control" data="${userStatus}">
                                <option value="">—请选择—</option>
                                <option value="1">正常</option>
                                <option value="0">冻结</option>
                          </select>
                </span>
                <button style="margin-left: 10px;" class="btn btn-primary" type="button" onclick="list()"><i class="glyphicon glyphicon-search"></i> 查询</button>
                <button class="btn btn-danger" onclick="addUser()" type="button"><i class="glyphicon glyphicon-plus-sign"></i> 添加</button>
            </form>
        </div>
    </div>

    <table id="userTb"
           data-toggle="table"
           data-url="${ctx}/sys/user/search"
           data-striped="true"
           data-pagination="true"
           data-side-pagination="server"
           data-page-size="5"
           data-page-list="[5,10,15,20]"
           data-query-params="queryParams"
           data-toolbar="toolbar"
           data-click-to-select="true">
        <thead>
            <tr>
                <th data-checkbox="true"></th>
                <th data-field="userCode">用户账号</th>
                <th data-field="userName">用户姓名</th>
                <th data-field="role.roleName">角色</th>
                <th data-field="email">邮箱</th>
                <th data-field="lastLoginTime">最后登录时间</th>
                <th data-field="userStatus" data-formatter="formStatus">角色（正常/冻结）</th>
                <th data-events="events" data-formatter="fmtOpt">操作</th>
            </tr>
        </thead>
    </table>
</div>

<div id="add">
    <form class="form-horizontal">
        <input type="hidden" name="createdBy" value="admin">
        <div class="form-group">
            <label for="" class="control-label col-md-4">用户账号：</label>
            <div class="col-md-4">
                <input type="text" name="userCode" class="form-control">
            </div>
        </div>
        <div class="form-group">
            <label for="" class="control-label col-md-4">用户名称：</label>
            <div class="col-md-4">
                <input type="text" name="userName" class="form-control">
            </div>
        </div>
        <div class="form-group">
            <label for="" class="control-label col-md-4">用户密码：</label>
            <div class="col-md-4">
                <input type="password" name="userPassword" class="form-control">
            </div>
        </div>
        <div class="form-group">
            <label for="" class="control-label col-md-4">用户角色：</label>
            <div class="col-md-4">
                <select name="roleId" class="form-control"></select>
            </div>
        </div>
        <div class="form-group">
            <label for="" class="control-label col-md-4">用户邮箱：</label>
            <div class="col-md-4">
                <input type="text" name="email" class="form-control">
            </div>
        </div>
    </form>
</div>

<div id="update">
    <form class="form-horizontal">
        <input type="hidden" name="id" value="id">
        <div class="form-group">
            <label for="" class="control-label col-md-4">登录账号：</label>
            <div class="col-md-4">
                <input type="text" name="userCode" readonly="readonly" class="form-control">
            </div>
        </div>
        <div class="form-group">
            <label for="" class="control-label col-md-4">用户名称：</label>
            <div class="col-md-4">
                <input type="text" name="userName" class="form-control">
            </div>
        </div>
        <div class="form-group">
            <label for="" class="control-label col-md-4">用户角色：</label>
            <div class="col-md-4">
                <select name="roleId" class="form-control">
                </select>
            </div>
        </div>
    </form>
</div>



<%@include file="/WEB-INF/jsp/comm/foot.jsp"%>
<script>



    function role(value,row){
        if(value==1){
            return "系统管理员";
        }
    }

    function fmtOpt(value, row){
        var edit = row["userStatus"] == 1 ? '<button class="btn btn-primary edit">冻结</button>' : '<button class="btn btn-danger edit">正常</button>'
        var update = '&nbsp;&nbsp;<button class="btn btn-default update">修改</button>';
        var log='&nbsp;&nbsp;<button class="btn btn-danger log">LOG日志</button>';
        return edit+update+log;
    }
    var events = {
        "click .edit" : function(e,value,row){
            update(row);
        },
        "click .update" : function(e, value, row){
            edit(row);
        },
        "click .log":function (e, value, row) {
            logs(row);
        }
    }
    function logs(row){
        var url='sys/get/log?userCode='+row["userCode"];
        location.href=url;
    }
    /*s
    * 修改用户
    * */
    $(function(){
        $("#update").dialog({
            title:"修改用户",
            btnName:"确定",
            btnBind:function(){
                var param=$("#update form").serialize();
                $.post(ctx+"sys/user/update",param,function(msg){
                    toastr.warning("信息提示",msg);
                    $("#update").dialog("close");
                    $("#update form")[0].reset();
                    $("#userTb").bootstrapTable("refresh");
                },'text');
            }
        });
    });

    /**
     * 编辑用户
     *
     * */
    function edit(row){
        for(var prop in row){
            $("#update").find("[name="+prop+"]").val(row[prop]);
        }
        console.info(row)
        $("#update").dialog("open");
    }

    /**
    * 修改状态
    */
    function update(row){
        var userStatus;
        if(row["userStatus"]==1){
            userStatus=0;
        }else{
            userStatus=1;
        }
        $.post(ctx+"sys/user/updateStatus",{id:row["id"],userStatus:userStatus},function(msg){
            toastr.warning("信息提示",msg);
            $("#userTb").bootstrapTable("refresh");
        })
    }
    /**
     * 修改显示
     */
    function formStatus(value,row){
        return value == 1 ? "正常" : "冻结";
    }
    /**
     * 模糊查询
     */
    function list(){
        var param={};
        param.name=$("[name=userName]").val();
        param.name=$("[name=userStatus]").val();
        $("#userTb").bootstrapTable("refresh",{query:param});
    }
    function queryParams(param){
        param.userName=$("[name=userName]").val();
        param.userStatus=$("[name=userStatus]").val();
        return param;
    }
    /*
     * 增加用户
     */
    function addUser(){
        $("#add").dialog("open");
    };
    $(function(){
        /**
         * 角色下拉
         */
        $.getJSON(ctx+"sys/role/search",function(arr){
            $(arr).each(function(){
                var $opt=$("<option/>");
                $opt.html(this.roleName);
                $opt.val(this.id);
                $opt.appendTo("[name=roleId]");
            })
        });
        $("#add").dialog({
            title:"添加用户",
            btnName:"确定",
            btnBind:function(){
                var param=$("#add form").serialize();
                $.post(ctx+"sys/user/add",param,function(msg){
                    toastr.warning("信息提示",msg);
                    $("#add").dialog("close");
                    $("#add form")[0].reset();
                    $("#userTb").bootstrapTable("refresh");
                },'text')
            }
        });
    })
</script>
</body>
</html>
